'use strict';
import React, {Component} from 'react';
import {
    Image, StyleSheet, Text, TouchableNativeFeedback, View, Switch,
    Picker, CheckBox
} from 'react-native';
import Color from '../../constant/Color';
import InputModal from "../modal/InputModal";
import SliderModal from "../modal/SliderModal";
import CustomSliderModal from "../modal/CustomSliderModal";

/** 键值行 */
export class TitleValueLine extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editable: props.editable,
            value: props.value,
        }
    }

    /** 设置是否可编辑 */
    setEditable(editable: boolean): void {
        this.setState({
            editable: editable,
        })
    }

    /** 设置value */
    setValue(value: string): void {
        this.setState({
            value: value,
        })
    }

    /** 获取value */
    getValue(): string {
        return this.state.value;
    }

    _doEdit(): void {
        this.refs.pop.setDatasAndShow("请输入" + this.props.title, this.props.info, this.state.value, (text: string) => {
            if (!text) return;
            this.setValue(text);
            if (this.props.onPress) this.props.onPress(text)
        });
    }

    render() {
        return (
            <TouchableNativeFeedback
                background={TouchableNativeFeedback.SelectableBackground()}
                onPress={() => {
                    this._doEdit()
                }}
                disabled={!this.state.editable}>
                <View
                    style={styles.TitleValueLine}>
                    <Text
                        style={this.state.editable ? styles.TitleValueLineTitleEditable : styles.TitleValueLineTitleUneditable}>{this.props.title}</Text>

                    <View
                        style={styles.TitleValueInnerLine}>
                        <Text
                            style={this.state.editable ? styles.TitleValueLineValueEditable : styles.TitleValueLineValueUneditable}>{this.state.value}</Text>

                        <Image
                            style={this.state.editable ? styles.TitleValueLineArrowEditable : styles.TitleValueLineArrowUneditable}
                            source={require('../../../../img/ic_chat_audio_right.png')}/>
                    </View>

                    <InputModal ref="pop"/>
                </View>
            </TouchableNativeFeedback>
        );
    }
}

//样式定义
const styles = StyleSheet.create({
    TitleValueLine: {
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: Color.white,
    },
    TitleValueLineTitleEditable: {
        flex: 1,
        color: Color.darkGray,
        fontSize: 14,
    },
    TitleValueLineTitleUneditable: {
        flex: 1,
        color: Color.gray,
        fontSize: 14,
    },

    TitleValueInnerLine: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },

    TitleValueLineValueEditable: {
        color: Color.black,
        fontSize: 14,
    },
    TitleValueLineValueUneditable: {
        color: Color.gray,
        fontSize: 14,
    },

    TitleValueLineArrowEditable: {
        width: 10,
        height: 10,
    },
    TitleValueLineArrowUneditable: {
        width: 10,
        height: 10,
        display: 'none',
    },
});

